<template>
  <div class="app-container">
    <div class="banner-list">
      <el-tabs v-model="imageAddData.serverPlace"
               @tab-click="handleTabsClick">
        <el-tab-pane label="国内服务器"
                     name="1"></el-tab-pane>
        <el-tab-pane label="国外服务器"
                     name="2"></el-tab-pane>
      </el-tabs>

      <div v-loading="isloading">
        <h3>Banner管理</h3>
        <div class="image-upload-box"
             ref="dragImage">
          <template v-for="(v, i) in bannerListData">
            <div :key="i"
                 v-if="i < 6">
              <div class="image-upload-item">
                <div class="image-upload-img"
                     :style="{ backgroundImage: 'url(' + v.bannerImage + ')' }">
                  <div class="top-tips">
                    <span>{{ v.sort }}</span>
                  </div>
                  <div class="add-btn"
                       v-if="!v.bannerId"
                       @click="showEditBanner('imageAddData','1')">
                    添加banner
                  </div>
                </div>
                <div class="image-upload-info"
                     v-if="v.bannerId">
                  <div class="date">上传时间 {{ v.createTime }}</div>
                  <div>
                    <el-button type="text"
                               @click="showEditBanner('imageAddData','2',v)">编辑</el-button>
                    <el-button type="text"
                               class="btn-red"
                               @click="bannerSwitch(v)">
                      {{ v.status === 0 ? "停用" : "恢复" }}</el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <h3>已停用Banner</h3>
        <div class="image-upload-box"
             ref="dragImage">
          <template v-for="(v, i) in bannerStopListData">
            <div :key="i">
              <div class="image-upload-item">
                <div class="image-upload-img"
                     :style="{ backgroundImage: 'url(' + v.bannerImage + ')' }">
                  <div class="top-tips">
                    <span>{{ v.sort }}</span>
                  </div>
                  <div class="add-btn"
                       v-if="!v.bannerId"
                       @click="showEditBanner('1')">
                    添加banner
                  </div>
                </div>
                <div class="image-upload-info"
                     v-if="v.bannerId">
                  <div class="date">上传时间 {{ v.createTime }}</div>
                  <div>
                    <el-button type="text"
                               @click="showEditBanner('imageAddData','2',v)">编辑</el-button>
                    <el-button type="text"
                               class="btn-green"
                               @click="bannerSwitch(v)">
                      {{ v.status === 9 ? "恢复" : "停用" }}</el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <el-dialog :title="imageAddData.dialogTxt+'Banner'"
                 :visible.sync="addDialogVisible"
                 width="40%"
                 :close-on-click-modal="false"
                 @closed="closeDialog('imageAddData')"
                 center>
        <el-form :model="imageAddData"
                 status-icon
                 :rules="imageAddRules"
                 ref="imageAddData"
                 label-width="100px"
                 label-position="left"
                 class="add-banner-form">
          <div class="image-upload-item">
            <div class="image-upload-img">
              <div class="top-tips">
                <span>1</span>
              </div>
              <img :src="imageAddData.bannerImage"
                   alt="" />
            </div>
            <div class="image-upload-info">
              <div class="date">图片尺寸1125*630</div>
              <div>
                <base-upload :fileSize="'500'"
                             @BadgeIconFun="handleBgImage"
                             :showFileList="false"
                             v-if="!imageAddData.bannerImage"></base-upload>
                <el-button type="text"
                           @click="imageAddData.bannerImage = ''"
                           v-else>重传</el-button>
              </div>
            </div>
          </div>

          <el-form-item label="国内服务器"
                        prop="age">
            <el-radio v-model="imageAddData.serverPlace"
                      label="1"
                      border
                      v-if="imageAddData.serverPlace === '1'">
              国内服务器
            </el-radio>
            <el-radio v-model="imageAddData.serverPlace"
                      label="2"
                      border
                      v-else>
              国外服务器
            </el-radio>
          </el-form-item>

          <el-form-item label="排序"
                        prop="rank">
            <el-input type="text"
                      v-model="imageAddData.sort"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-radio-group v-model="imageAddRadio">
            <el-radio :label="1">课程ID</el-radio>
            <el-radio :label="2">链接地址</el-radio>
          </el-radio-group>

          <el-form-item prop="courseSeq"
                        class="input-choose"
                        v-if="imageAddRadio === 1">
            <el-input type="text"
                      v-model="imageAddData.courseSeq"
                      autocomplete="off">
            </el-input>
          </el-form-item>

          <el-form-item prop="linkAddress"
                        class="input-choose"
                        v-else>
            <el-input type="text"
                      v-model="imageAddData.linkAddress"
                      autocomplete="off">
            </el-input>
          </el-form-item>
        </el-form>

        <span slot="footer"
              class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="submitForm('imageAddData')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getBannerEdit,
  getBannerAdd,
  getBannerList,
  getBannerSwitch,
} from '@/api/table'
import BaseUpload from '@/components/Upload/BaseUpload'
import format from 'date-format'

export default {
  data() {
    return {
      isloading: true,
      addDialogVisible: false,
      bannerServeRadio: '1',
      bannerListDataNum: 0,
      bannerListData: [],
      bannerStopListData: [],
      imageAddData: {
        serverPlace: '1',
        dialogName: '',
        bannerName: '',
        courseSeq: '',
        linkAddress: '',
        bannerImage: '',
        sort: '',
        chooseInput: '',
        bannerId: '',
      },
      imageAddRules: {
        linkAddress: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur',
          },
        ],
        courseSeq: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur',
          },
        ],
      },
      imageAddRadio: 1,
    }
  },
  mounted() {
    this.bannerList()
  },
  methods: {
    resetForm(formName) {
      this.addDialogVisible = false
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
    },
    handleTabsClick() {
      this.bannerList()
      this.isloading = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.imageAddData.dialogTxt === '添加') {
            this.addImageBanner(formName)
          } else {
            this.editImageBanner(formName)
          }
        } else {
          return false
        }
      })
    },
    async addImageBanner(name) {
      if (this.imageAddRadio === 1) {
        this.imageAddData.linkAddress = ''
      } else {
        this.imageAddData.courseSeq = ''
      }
      const res = await getBannerAdd({
        bannerName: this.imageAddData.bannerName,
        bannerImage: this.imageAddData.bannerImage,
        courseSeq: this.imageAddData.courseSeq,
        linkAddress: this.imageAddData.linkAddress,
        sort: this.imageAddData.sort,
        serverPlace: this.imageAddData.serverPlace,
      })
      this.resetForm(name)
      this.bannerList()
      this.$message({
        type: 'success',
        message: '添加成功',
      })
    },
    async editImageBanner() {
      let editImage = ''
      if (this.imageAddData.bannerImage.indexOf('http') === 0) {
        editImage = null
      } else {
        editImage = this.imageAddData.bannerImage
      }

      if (this.imageAddRadio === 1) {
        this.imageAddData.linkAddress = ''
      } else {
        this.imageAddData.courseSeq = ''
      }
      const res = await getBannerEdit({
        bannerName: this.imageAddData.bannerName,
        bannerImage: editImage,
        courseSeq: this.imageAddData.courseSeq,
        linkAddress: this.imageAddData.linkAddress,
        sort: this.imageAddData.sort,
        serverPlace: this.imageAddData.serverPlace,
        bannerId: this.imageAddData.bannerId,
      })
      this.resetForm(name)
      this.bannerList()
      this.$message({
        type: 'success',
        message: '编辑成功',
      })
    },
    async bannerSwitch(data) {
      const res = await getBannerSwitch({
        bannerId: data.bannerId,
        serverPlace: data.serverPlace,
      })
      this.bannerList()
      this.$message({
        type: 'success',
        message: '修改成功',
      })
    },
    async bannerList() {
      const res = await getBannerList({
        serverPlace: this.imageAddData.serverPlace,
        pageNum: '1',
        pageSize: '9999',
      })
      this.bannerListData = []
      this.bannerStopListData = []
      res.result.list.forEach((item) => {
        const data = {}
        data.bannerId = item.id
        data.bannerName = item.bannerName
        data.bannerImage = item.bannerImage
        data.serverPlace = item.serverPlace
        data.linkAddress = item.linkAddress
        data.courseSeq = item.courseSeq
        const newTime = format('yyyy-MM-dd hh:mm:ss', new Date(item.createTime))
        data.createTime = newTime
        data.sort = item.sort
        data.status = item.status
        if (item.status === 0) {
          this.bannerListData.push(data)
        } else {
          this.bannerStopListData.push(data)
        }
      })
      this.bannerListDataNum = this.bannerListData.length
      for (let i = 1; i <= 6 - this.bannerListDataNum; i++) {
        this.bannerListData.push({
          bannerName: '',
          bannerImage: '',
          serverPlace: '',
          createTime: '',
          sort: '',
          status: '',
        })
      }
      this.isloading = false
    },
    showEditBanner(name, type, value) {
      this.addDialogVisible = true
      if (type === '1') {
        this.imageAddData.dialogTxt = '添加'
        this.imageAddData.bannerName = ''
        this.imageAddData.chooseInput = ''
        this.imageAddData.bannerImage = ''
        this.imageAddData.sort = ''
        this.imageAddRadio = 1
      } else {
        this.imageAddData.dialogTxt = '编辑'
        if (value.linkAddress) {
          this.imageAddRadio = 2
          this.imageAddData.linkAddress = value.linkAddress
        } else if (value.courseSeq) {
          this.imageAddRadio = 1
          this.imageAddData.courseSeq = value.courseSeq
        }
        this.imageAddData.bannerName = value.bannerName
        this.imageAddData.bannerImage = value.bannerImage
        this.imageAddData.sort = value.sort
        this.imageAddData.serverPlace = value.serverPlace.toString()
        this.imageAddData.bannerId = value.bannerId
      }
    },
    handleBgImage(data) {
      this.imageAddData.bannerImage = data.backData.imgUrl
      this.imageAddData.bannerName = data.backData.name
    },
  },
  components: {
    BaseUpload,
  },
}
</script>
<style lang="scss" scoped>
.banner-list {
  h3 {
    font-size: 26px;
  }
  .image-upload {
    &-box {
      display: grid;
      grid-template-columns: repeat(3, 33.33%);
      // flex-wrap: wrap;
      // align-content: stretch;
    }
    &-item {
      margin: 20px;
      .date {
        font-size: 14px;
      }
    }
    &-img {
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      max-width: 400px;
      height: 200px;
      margin: 0 auto;
      background-size: cover;
      border: 1px solid #304156;
      .add-btn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .top-tips {
        position: absolute;
        left: -50px;
        top: -50px;
        transform: rotate(-45deg);
        background: #304156;
        width: 100px;
        height: 100px;
        line-height: 170px;
        text-align: center;
        span {
          display: block;
          color: #fff;
          transform: rotate(45deg);
        }
      }
      img {
        width: 400px;
      }
    }
    &-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
  }
}
</style>
<style lang="scss">
.input-choose {
  .el-form-item__content {
    margin-left: 0 !important;
    margin-top: 20px;
  }
}
.el-dialog__body {
  overflow: scroll;
}
</style>
